<template>
	<div class="screen_wrap echarts_box flex_wrap">
		<corner></corner>
		<title1 title="各站点优良天数排名TOP5"></title1>
		<div class="flex_body">
			<e-chart :options="option" style="height:100%"></e-chart>
		</div>
	</div>
</template>

<script>
	import { getAirDaysSort,getRegionDeptCount } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'
	export default {
		components: {
			corner,
			title1
		},
		data() {
			return {
				sum: 0, // 点位总数		
				option: null,
				data: [],
				attackSourcesColor: [
					new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [{
							offset: 0,
							color: "#EB3B5A"
						},
						{
							offset: 1,
							color: "#FE9C5A"
						}
					]),
					new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [{
							offset: 0,
							color: "#FA8231"
						},
						{
							offset: 1,
							color: "#FFD14C"
						}
					]),
					new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [{
							offset: 0,
							color: "#F7B731"
						},
						{
							offset: 1,
							color: "#FFEE96"
						}
					]),
					new this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [{
							offset: 0,
							color: "#395CFE"
						},
						{
							offset: 1,
							color: "#2EC7CF"
						}
					])
				],
				attackSourcesColor1: ["#EB3B5A", "#FA8231", "#F7B731", "#3860FC", "#1089E7", "#F57474", "#56D0E3", "#1089E7", "#F57474", "#1089E7", "#F57474", "#F57474"],
				attaData: [],
				attaName: [],
				topName: [],
				salvProMax: [], //背景按最大值
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			attackSourcesDataFmt(sData) {
				var sss = [];
				let that = this
				sData.forEach(function(item, i) {
					let itemStyle = {
						color: i > 3 ? that.attackSourcesColor[3] : that.attackSourcesColor[i]
					};
					sss.push({
						value: item,
						itemStyle: itemStyle
					});
				});
				return sss;
			},
			contains(arr, dst) {
				var i = arr.length;
				while((i -= 1)) {
					if(arr[i] == dst) {
						return i;
					}
				}
				return false;
			},
			init() {
				getAirDaysSort().then(res => {
					
					this.data = res.data.data
					// 按照点位数量排序 从大到小排
					let arr = this.data.sort(function(a, b) {
						return Number(b.num)- Number(a.num)
					})
					// 取前十,考虑 长度<=10的情况
					let newArr = null
					if(arr.length <= 10) {
						newArr = arr
					} else {
						newArr = arr.slice(0, 10)
					}
					newArr.forEach((item, index) => {
						this.attaData[index] =  Number(item.num);
						this.attaName[index] = Number(item.num);
						this.topName[index] = `${item.type}`
					});
					// 倒叙
					this.topName.reverse()
					for(let i = 0; i < this.attaData.length; i++) {
						this.salvProMax.push(this.attaData[0]);
					}
					let that = this
					this.option = {
						tooltip: {
							show: false,
							backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
							textStyle: {
								fontSize: 16
							}
						},
						color: ["#F7B731"],
						grid: {
							left: "10%",
							right: "12%",
							width: "85%",
							bottom: "2%",
							top: "9%",
							containLabel: false
						},
						xAxis: {
							type: "value",
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLine: {
								show: false
							}
						},
						yAxis: [
							// 最左侧标记设置
							{
								type: "category",
								inverse: true,
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisPointer: {
									label: {
										show: true,
									}
								},
								postion: "right",
								data: that.attaName,
								axisLabel: {
									margin: 25,
									fontSize: 12,
									align: "left",
									padding: [2, 0, 0, 0],
									color: "#ff0",
									rich: {
										nt1: {
											color: "#fff",
											backgroundColor: that.attackSourcesColor1[0],
											width: 13,
											height: 13,
											fontSize: 10,
											align: "center",
											borderRadius: 100,
											lineHeight: "5",
											padding: [0, 1, 2, 1]

										},
										nt2: {
											color: "#fff",
											backgroundColor: that.attackSourcesColor1[1],
											width: 13,
											height: 13,
											fontSize: 10,
											align: "center",
											borderRadius: 100,
											padding: [0, 1, 2, 1]
										},
										nt3: {
											color: "#fff",
											backgroundColor: that.attackSourcesColor1[2],
											width: 13,
											height: 13,
											fontSize: 10,
											align: "center",
											borderRadius: 100,
											padding: [0, 1, 2, 1]
										},
										nt: {
											color: "#fff",
											backgroundColor: that.attackSourcesColor1[3],
											width: 13,
											height: 13,
											fontSize: 10,
											align: "center",
											lineHeight: 3,
											borderRadius: 100,
											padding: [0, 1, 2, 1],
											lineHeight: 5
										}
									},
									formatter: function(value, index) {
										let num=index+1
										if(num<=3){
											return ["{nt" + num + "|" + num + "}"].join("\n");
										}else{
											return ["{nt|" + num + "}"].join("\n");
										}
									}
								}
							},
							// 最右侧文字设置
							{
								type: "category",
								offset: -10,
								inverse: true,
								axisTick: "none",
								axisLine: "none",
								show: false,
								axisLabel: {
									textStyle: {
										color: this.$fontColor,
										fontSize: "12"
									}
								},
								data: that.attackSourcesDataFmt(that.attaName)
							},
							// 设置上方文字
							{
								type: 'category',
								offset: -10,
								position: "left",
								axisLabel: {
									color: '#ff0',
									fontSize: 12
								},
								axisLine: {
									show: false
								},
								inverse: false,
								axisTick: {
									show: false
								},
								axisLabel: {
									interval: 0,
									color: [this.$fontColor],
									align: "left",
									verticalAlign: "bottom",
									lineHeight: 32,
									fontSize: 12
								},
								data: that.topName
							}
						],
						series: [
							// 柱状体设置
							{
								zlevel: 1,
								name: "",
								type: "bar",
								barWidth: 12,
								animationDuration: 1500,
								data: that.attackSourcesDataFmt(that.attaData),
								align: "center",
								itemStyle: {
									normal: {
										barBorderRadius: 20
									}
								},
								// 中间的颜色设置
								label: {
									show: true,
									formatter: (params) => {
										return params.value
									},
									fontSize: 12,
									color: "#fff",
									textBorderWidth: 2,
									padding: [2, 0, 0, 15]
								}
							},
							{
								name: "",
								type: "bar",
								barWidth: 12,
								barGap: "-100%",
								margin: "20",
								data: that.salvProMax,
								textStyle: {
									//图例文字的样式
									fontSize: 12,
									color: "#fff"
								},
								itemStyle: {
									normal: {
										color: "#05325F",
										fontSize: 10,
										barBorderRadius: 30
									}
								}
							}
						]
					}

				})
			}
		}
	}
</script>